<template>
	<div class="score1 abs full">
		<div class="rel full overflow-x-hidden">
			<product-header :detail="detail.INSURANCE" :simple="true" v-if="detail && detail.INSURANCE"></product-header>
			<!--疾病定义页面-->
			<div v-if="score==1">
				<div class="score-detail">
					<div class="abs score">
						<div class="rel">
							<p class="abs rank"><span>{{DD.SCORE}}</span><span class="tail">分</span></p>
							<p class="abs score-title">疾病定义</p>
							<div class="abs full border1"></div>
							<div class="abs full border2"></div>
							<div class="abs full border3"></div>
							<div class="abs full border4"></div>
							<div class="abs full bubble"></div>
						</div>
					</div>
					<div class="score-text abs">
						<p>在同类产品的前{{DD.RANK}}</p>
						<h4>在售产品该项平均{{DD.AVERAGE}}分</h4>
						<h4>疾病定义符合标准，疾病数量足</h4>
					</div>
				</div>
				<div class="score-content-wrapper rel">
					<div class="score-content rel content1" @click="activateItem(1)">
						<div class="content-icon abs">
							<h4>{{DD.DISEASE_AMOUNT.SOCRE}}<span>分</span></h4>
							<div class="img-wrapper">
								<img class="icon-1-1" src="./image/icon-1-1.png" alt="">
							</div>
						</div>
						<div class="content-wrapper abs">
							<h3>疾病数量</h3>
							<p>轻症：<span>{{DD.DISEASE_AMOUNT.AMOUNT.ADULT_MINOR + DD.DISEASE_AMOUNT.AMOUNT.CHILD_MINOR}}</span></p>
							<p>重疾：<span>{{DD.DISEASE_AMOUNT.AMOUNT.ADULT_MAJOR + DD.DISEASE_AMOUNT.AMOUNT.CHILD_MAJOR}}</span></p>
						</div>
						<span class="icon-r abs"></span>
					</div>
					<div class="score-content rel content2" @click="activateItem(2)">
						<div class="content-icon abs">
							<h4>{{DD.DISEASE_CONTENT.SCORE}}<span>分</span></h4>
							<div class="img-wrapper">
								<img class="icon-1-2" src="./image/icon-1-2.png" alt="">
							</div>
						</div>
						<div class="content-wrapper abs">
							<h3>疾病内容</h3>
							<p>疾病定义优势项：<span>疾病内容定义标准重疾不包含项少</span></p>
						</div>
						<span class="icon-r abs"></span>
					</div>
					<div class="score-footer">
						<button @click="goToReport">生成报告</button>
						<p class="list-footer list-footer1">想看条款详细解读？那就去“生成报告”吧！</p>
						<p class="list-footer list-footer2" @click="this.history.go(-1)">返回综合评价</p>
					</div>
				</div>
			</div>
			<!--保单责任页面-->
			<div v-if="score==2">
				<div class="score-detail-res">
					<div class="abs score">
						<div class="rel">
							<p class="abs rank"><span>{{PL.SCORE}}</span><span class="tail">分</span></p>
							<p class="abs score-title">保单责任</p>
							<div class="abs full border1"></div>
							<div class="abs full border2"></div>
							<div class="abs full border3"></div>
							<div class="abs full border4"></div>
							<div class="abs full bubble"></div>
						</div>
					</div>
					<div class="score-text abs">
						<p>在同类产品的前{{PL.RANK}}</p>
						<h4>综述</h4>
						<h4>按分数分档的通用话术，俊霖提供</h4>
					</div>
				</div>
				<div class="score-content-wrapper rel">
					<div class="score-content-res rel content">
						<div class="item rel" @click="activateItem(1)">
							<div class="content-icon abs">
								<h4>{{PL.WAITING_PERIOD.SCORE}}<span>分</span></h4>
								<div class="img-wrapper">
									<img class="icon-1" src="./image/icon-1.png" alt="">
								</div>
							</div>
							<div class="content-wrapper rel">
								<h3>等待期</h3>
								<p>重疾:{{PL.WAITING_PERIOD.MAJOR_WAIT_PERIOD}}天</p>
								<p>身故:{{PL.WAITING_PERIOD.DEATH_WAIT_PERIOD}}天</p>
							</div>
						</div>
						<div class="item rel" @click="activateItem(2)">
							<div class="content-icon abs">
								<h4>{{PL.PAYMENT_TIMES.MAJOR_CLAIM_TIMES_SCORE}}<span>分</span></h4>
								<div class="img-wrapper">
									<img class="icon-2" src="./image/icon-2.png" alt="">
								</div>
							</div>
							<div class="content-wrapper rel">
								<h3>给付次数</h3>
								<p>轻症:{{PL.PAYMENT_TIMES.MINOR_CLAIM_TIMES}}次</p>
								<p>重疾:{{PL.PAYMENT_TIMES.MAJOR_CLAIM_TIMES}}次</p>
							</div>
						</div>
					</div>
					<div class="score-content-res rel content">
						<div class="item rel"  @click="activateItem(3)">
							<div class="content-icon abs">
								<h4>{{PL.RESIDUAL_LIABILITY.SCORE}}<span>分</span></h4>
								<div class="img-wrapper">
									<img class="icon-3" src="./image/icon-3.png" alt="">
								</div>
							</div>
							<div class="content-wrapper rel">
								<h3>全残责任</h3>
								<p>{{PL.RESIDUAL_LIABILITY.WRECK_DEIL?'有':'无'}}</p>
							</div>
						</div>
						<div class="item rel"  @click="activateItem(4)">
							<div class="content-icon abs">
								<h4>{{PL.MINOR_CLAIMS.SCORE}}<span>分</span></h4>
								<div class="img-wrapper">
									<img class="icon-4" src="./image/icon-4.png" alt="">
								</div>
							</div>
							<div class="content-wrapper rel">
								<h3>轻症赔付</h3>
								<p>{{PL.MINOR_CLAIMS.PAYMENT}}</p>
							</div>
						</div>
					</div>
					<div class="score-content-res rel content">
						<div class="item rel" @click="activateItem(5)">
							<div class="content-icon abs">
								<h4>{{PL.EXEMPTION_CLAUSE.SCORE}}<span>分</span></h4>
								<div class="img-wrapper">
									<img class="icon-5" src="./image/icon-5.png" alt="">
								</div>
							</div>
							<div class="content-wrapper rel">
								<h3>免责条款</h3>
								<p>{{PL.EXEMPTION_CLAUSE.NUMBERS}}条</p>
							</div>
						</div>
						<div class="item rel" @click="activateItem(6)">
							<div class="content-icon abs">
								<h4>{{PL.WAIVER_PREMIUM.MAJOR_WAIVER_PREMIUM_SCORE}}<span>分</span></h4>
								<div class="img-wrapper">
									<img class="icon-6" src="./image/icon-6.png" alt="">
								</div>
							</div>
							<div class="content-wrapper rel">
								<h3>保费豁免</h3>
								<p>&nbsp;</p>
							</div>
						</div>
					</div>
					<div class="score-content-res rel content content-last" @click="activateItem(7)">
						<div class="item rel">
							<div class="content-icon abs">
								<h4>{{PL.LIABILITY_DEATH.SCORE}}<span>分</span></h4>
								<div class="img-wrapper">
									<img class="icon-7" src="./image/icon-7.png" alt="">
								</div>
							</div>
							<div class="content-wrapper rel">
								<h3>身故责任</h3>
								<p>{{PL.LIABILITY_DEATH.Payment}}</p>
							</div>
						</div>
					</div>
					<div class="score-footer">
						<button @click="goToReport">生成报告</button>
						<p class="list-footer list-footer1">想看条款详细解读？那就去“生成报告”吧！</p>
						<p class="list-footer list-footer2" @click="this.history.go(-1)">返回综合评价</p>
					</div>
				</div>
			</div>
			<!--产品价格页面-->
			<div v-if="score==3">
				<div class="score-detail">
					<div class="abs score">
						<div class="rel">
							<p class="abs rank"><span>-</span><span class="tail">分</span></p>
							<p class="abs score-title">产品价格</p>
							<div class="abs full border1"></div>
							<div class="abs full border2"></div>
							<div class="abs full border3"></div>
							<div class="abs full border4"></div>
							<div class="abs full bubble"></div>
						</div>
					</div>
					<div class="score-text abs">
						<!--<p>在同类产品的前15-20%</p>-->
						<h4></h4>
					</div>
				</div>
				<div class="score-content-wrapper rel">
					<div class="score-content rel content1" style="height: 3.35rem">
					</div>
					<div class="score-footer">
						<button @click="goToReport">生成报告</button>
						<p class="list-footer list-footer1">想看条款详细解读？那就去“生成报告”吧！</p>
						<p class="list-footer list-footer2" @click="this.history.go(-1)">返回综合评价</p>
					</div>
				</div>
			</div>
			<!--服务方式页面-->
			<div v-if="score==4">
				<div class="score-detail">
					<div class="abs score">
						<div class="rel">
							<p class="abs rank"><span>{{SM.SCORE}}</span><span class="tail">分</span></p>
							<p class="abs score-title">服务方式</p>
							<div class="abs full border1"></div>
							<div class="abs full border2"></div>
							<div class="abs full border3"></div>
							<div class="abs full border4"></div>
							<div class="abs full bubble"></div>
						</div>
					</div>
					<div class="score-text abs">
						<p>在同类产品的前{{SM.RANK}}</p>
						<h4>认定标准人性化，赔付材料不复杂</h4>
					</div>
				</div>
				<div class="score-content-wrapper rel">
					<div class="score-content rel content1" @click="activateItem(1)">
						<div class="content-icon abs">
							<h4>{{SM.HOSPITAL_IDENTIFICATION.SCORE}}<span>分</span></h4>
							<div class="img-wrapper">
								<img class="icon-1" src="./image/icon-1-4-1.png" alt="">
							</div>
						</div>
						<div class="content-wrapper abs">
							<h3>医院认定</h3>
							<p>医院认定标准：<span>{{SM.HOSPITAL_IDENTIFICATION.HOSPITAL_STANDARD}}</span><br/></p>
							<p>科室认定标准：<span>{{SM.HOSPITAL_IDENTIFICATION.DEPARTMENT_STANDARD}}</span><br/></p>
						</div>
						<span class="icon-r abs"></span>
					</div>
					<div class="score-content rel content2" @click="activateItem(2)">
						<div class="content-icon abs">
							<h4>{{SM.NOTIFICATION_PERIOD.SCORE}}<span>分</span></h4>
							<div class="img-wrapper">
								<img class="icon-1-2" src="./image/icon-1-4-2.png" alt="">
							</div>
						</div>
						<div class="content-wrapper abs">
							<h3>通知期</h3>
							<p>通知期时长：<span>{{SM.NOTIFICATION_PERIOD.TERM}}天</span></p>
						</div>
						<span class="icon-r abs"></span>
					</div>
					<div class="score-footer">
						<button @click="goToReport">生成报告</button>
						<p class="list-footer list-footer1">想看条款详细解读？那就去“生成报告”吧！</p>
						<p class="list-footer list-footer2" @click="this.history.go(-1)">返回综合评价</p>
					</div>
				</div>
			</div>
			<!--保单管理页面-->
			<div v-if="score==5">
				<div class="score-detail">
					<div class="abs score">
						<div class="rel">
							<p class="abs rank"><span>{{PM.SCORE}}</span><span class="tail">分</span></p>
							<p class="abs score-title">保单管理</p>
							<div class="abs full border1"></div>
							<div class="abs full border2"></div>
							<div class="abs full border3"></div>
							<div class="abs full border4"></div>
							<div class="abs full bubble"></div>
						</div>
					</div>
					<div class="score-text abs">
						<p>在同类产品的前{{PM.RANK}}</p>
						<h4>提供减额交清等支付方式</h4>
					</div>
				</div>
				<div class="score-content-wrapper rel">
					<div class="score-content rel content1" @click="activateItem(1)">
						<div class="content-icon abs">
							<h4>{{PM.AUTOMATIC_PAYMENT.SCORE}}<span>分</span></h4>
							<div class="img-wrapper">
								<img class="icon-1-1" src="./image/icon-1-5-1.png" alt="">
							</div>
						</div>
						<div class="content-wrapper abs">
							<h3>自动垫付</h3>
							<p>有无自动垫付：<span>{{PM.AUTOMATIC_PAYMENT.REQUIREMENT?'有':'无'}}</span><br/></p>
						</div>
						<span class="icon-r abs"></span>
					</div>
					<div class="score-content rel content2" @click="activateItem(2)">
						<div class="content-icon abs">
							<h4>{{PM.DEDUCTION_PAID.SCORE}}<span>分</span></h4>
							<div class="img-wrapper">
								<img class="icon-1-2" src="./image/icon-1-5-2.png" alt="">
							</div>
						</div>
						<div class="content-wrapper abs">
							<h3>减额交清</h3>
							<p>是否包含本项：<span>{{PM.DEDUCTION_PAID.REQUIREMENT?'包含':'不包含'}}</span></p>
						</div>
						<span class="icon-r abs"></span>
					</div>
					<div class="score-content rel content3" @click="activateItem(3)">
						<div class="content-icon abs">
							<h4>{{PM.POLICY_LOAN.SCORE}}<span>分</span></h4>
							<div class="img-wrapper">
								<img class="icon-1-2" src="./image/icon-1-5-3.png" alt="">
							</div>
						</div>
						<div class="content-wrapper abs">
							<h3>保单贷款</h3>
							<p>有无保单贷款：<span>{{PM.POLICY_LOAN.REQUIREMENT?'有':'无'}}</span></p>
						</div>
						<span class="icon-r abs"></span>
					</div>
					<div class="score-footer">
						<button @click="goToReport">生成报告</button>
						<p class="list-footer list-footer1">想看条款详细解读？那就去“生成报告”吧！</p>
						<p class="list-footer list-footer2" @click="this.history.go(-1)">返回综合评价</p>
					</div>
				</div>
			</div>
			<!--保险公司页面-->
			<div v-if="score==6">
				<div class="score-detail">
					<div class="abs score">
						<div class="rel">
							<p class="abs rank"><span>{{IC.SCORE?IC.SCORE:'-'}}</span><span class="tail">分</span></p>
							<p class="abs score-title">{{IC.NAME}}</p>
							<div class="abs full border1"></div>
							<div class="abs full border2"></div>
							<div class="abs full border3"></div>
							<div class="abs full border4"></div>
							<div class="abs full bubble"></div>
						</div>
					</div>
					<div class="score-text abs">
						<p>在同类产品的前{{IC.RANK}}</p>
						<h4>在售产品该项平均{{IC.AVERAGE}}分</h4>
						<h4>平安保险公司出品，大公司有保障</h4>
					</div>
				</div>
				<div class="score-content-wrapper rel">
					<div class="score-content rel content1">
						<div class="content-icon abs">
							<h4>{{IC.COMPLAINT_RATE.SCORE}}<span>分</span></h4>
							<div class="img-wrapper">
								<img class="icon-1-1" src="./image/icon-1-6-1.png" alt="">
							</div>
						</div>
						<div class="content-wrapper abs">
							<h3>投诉率</h3>
							<p v-if="IC.COMPLAINT_RATE.RANK">保险公司投诉率排名：<span>{{IC.COMPLAINT_RATE.RANK}}</span></p>
						</div>
						<!--<span class="icon-r abs"></span>-->
					</div>
					<div class="score-content rel content2">
						<div class="content-icon abs">
							<h4>{{IC.PAY_ABILITY.SCORE}}<span>分</span></h4>
							<div class="img-wrapper">
								<img class="icon-1-2" src="./image/icon-1-6-2.png" alt="">
							</div>
						</div>
						<div class="content-wrapper abs">
							<h3>偿付能力</h3>
							<p v-if="IC.PAY_ABILITY.RANK">偿付能力充足率排名：<span>{{IC.PAY_ABILITY.RANK}}</span></p>
						</div>
						<!--<span class="icon-r abs"></span>-->
					</div>
					<div class="score-footer">
						<button @click="goToReport">生成报告</button>
						<p class="list-footer list-footer1">想看条款详细解读？那就去“生成报告”吧！</p>
						<p class="list-footer list-footer2" @click="this.history.go(-1)">返回综合评价</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import ProductHeader from '@/components/product-header/product-header.vue';
	export default {
		name: 'score1',
		components: {
			ProductHeader
		},
		data(){
			return {
				id:this.$route.query.id,
				detail:{},
				DD:{},
				PL:{},
				SM:{},
				PM:{},
				IC:{},
				score:0
			}
		},
		mounted(){
			// 为方便调试把this暴露在window对象下
			window.score1=this;
		},
		updated(){

		},
		activated(){
			var score = this.$util.getQueryString('score1')
			this.score = score
			score==1?document.title='疾病定义':''
			score==2?document.title='保单责任':''
			score==3?document.title='产品价格':''
			score==4?document.title='服务方式':''
			score==5?document.title='保单管理':''
			score==6?document.title='保险公司':''
			this.getDetail();
			this.initData();
		},
		deactivated(){
			this.detail={};
		},
		methods: {
			initData(){
				this.PL = this.detail.POLICY_LIABILITY
				this.DD = this.detail.DISEASE_DEFINITION
				this.SM = this.detail.SERVICE_MODE
				this.PM = this.detail.POLICY_MANAGEMENT
				this.IC = this.detail.INSURANCE_COMPANY
				this.PP = this.detail.PRODUCT_PRICE
			},
			//点击某一列表项时,路由跳转至该项的详情描述
			activateItem(index){
				this.$router.push('/score2?id='+this.detail.INSURANCE.PRODUCT_ID+'&score1='+this.score+'&score2='+index);
			},
			goToReport: function(){
				let id=this.$route.query.id;
				if(!id){
					return;
				}
				this.$router.push('/pre-report?id='+id);
			},
			// 调接口获取维度详情
			getDetail() {
				this.detail = {};
				let that = this;
				let id = this.$route.query.id;
				if (!id) {
					this.showToast('出错了(保险id为空)', 'warning');
					return;
				}
				// 查询缓存中是否存在head信息
				let ifCached = this.ifCached(id);
				if (ifCached) {
					that.detail = ifCached;
				} else {
					// 判断是否有customerId
					let customerId = this.$util.getCustomerId();
					if (!customerId) {
						return;
					}
					this.$util.ajax('/evaluation/comprehensiveEvaluation', 'post', {
						customerId: customerId,
						insuranceId: id
					}).then(function(data) {
						if (data.code == '100000') {
							that.detail = data.data;
						}
					});
				}
		},
			// 获取url参数中的保险ID,先去$store中查询是否有缓存
			ifCached(id) {
					let detail = this.$store.detail;
					if (detail.length == 0) {
						return false;
					}
					for (let i = 0; i < detail.length; i++) {
						if (detail[i].INSURANCE.PRODUCT_ID == id) {
							return detail[i];
							break;
						}
					}
				}
		}
	}
</script>

<style scoped>
	.score1.abs.full{
		background: url(./image/bg.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.score-detail,.score-detail-res{
		position: absolute;
		top: 1.4rem;
		height: 2.3rem;
		width: 100%;
		}
	/*评分*/
	.abs.score{
		transform: scale(1.18);
		top: 0.15rem;
		left: 0.2rem;
	}
	.score {
		width: 1.94rem;
		height: 1.94rem;
	}
	.score .rel {
		width: 1.94rem;
		height: 1.94rem;
	}
	.score .border1 {
		background: url(../detail/image/border1.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.score .border2 {
		background: url(../detail/image/border2.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.score .border3 {
		background: url(../detail/image/border3.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.score .border4 {
		background: url(../detail/image/border4.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.score .bubble {
		background: url(../detail/image/bubble.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	/*动画*/
	.score .border1{
		animation: clockwise 6s infinite linear;
		animation-fill-mode: forwards;
	}
	@keyframes clockwise {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(720deg);
		}
	}
	.score .border2{
		animation: anti-clockwise 9s  infinite linear;
		animation-fill-mode: forwards;
	}
	@keyframes anti-clockwise {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(-720deg);
		}
	}
	.score .border3{
		animation: clockwise 12s infinite linear;
		animation-fill-mode: forwards;
	}
	@keyframes clockwise {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(720deg);
		}
	}
	.score .border4{
		animation: anti-clockwise 14s infinite linear;
		animation-fill-mode: forwards;
	}
	@keyframes anti-clockwise {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(-720deg);
		}
	}
	.score .rank {
		top: 0.6rem;
		width: 100%;
		margin: 0;
		text-align: center;
		font-size: 0.36rem;
		color: #00baff;
	}
	.score .rank .tail {
		font-size: 0.22rem;
	}
	.score .score-title {
		top: 1.2rem;
		width: 100%;
		margin: 0;
		text-align: center;
		font-size: 0.21rem;
		color: #86eaff;
	}
	/*评分描述*/
	.score-text {
		width: 6.24rem;
		height: 1.7rem;
		background:url("./image/text_bg.png");
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		right: 0;
		top: 0.26rem;
	}
	.score-text p{
		padding-top: 0.12rem;
		padding-left: 1.2rem;
		font-size: 0.22rem;
		color: #a0c0ed;
		line-height: 0.05rem;
	}
	.score-text h4{
		padding-left: 1.2rem;
		font-size: 0.28rem;
		color: #a0c0ed;
		line-height: 0.1rem;
		font-weight: normal;
	}
	/*具体内容项*/
	.score-content-wrapper{
		width: 100%;
		margin-top: 2.76rem;
	}
	.score-content{
		width: 100%;
		height: 2.25rem;
		background:url("./image/content_bg.png");
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		margin-bottom: 0.04rem;
	}
	.score-content-res{
		width: 100%;
		height: 2.25rem;
		background:url("./image/content_bg_res.png");
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		margin-bottom: 0.04rem;
	}
	.score-content-res .item{
		width: 50%;
		height:2.25rem;
		text-align: left;
		float: left;
		display: inline-block;
	}
	.score-content-res .item .content-icon{
		left: 0.6rem;
	}
	.score-content-res .item .content-wrapper{
		left: 1.94rem;
	}
	.score-content-res.content-last{
		background:url("./image/content_bg.png");
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.content-icon{
		width: 1.11rem;
		height: 1.38rem;
		background:url("./image/count_bg.png");
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		text-align: center;
		top: 0.42rem;
		left: 0.46rem;
	}
	.content-icon h4{
		font-size: 0.26rem;
		color: #86eaff;
		font-weight: normal;
		margin-top: 0.18rem;
	}
	.content-icon h4 span{
		font-size: 0.16rem;
	}
	.content-icon .img-wrapper{
		 width: 0.65rem;
		 height: 0.65rem;
		 margin: -0.17rem auto 0;
		 position: relative;
	 }
	.content-icon .img-wrapper img{
		position: absolute;
		top: 51%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 0.5rem;
		height: 0.5rem;
	}
	.content-wrapper{
		left: 1.8rem;
		top: 0.4rem;
		width: 5.3rem;
	}
	.content-wrapper h3{
		font-size: 0.28rem;
		color: #ffe373;
		margin: 0;
		font-weight: normal;
		line-height: 0.4rem;
	}
	.content-wrapper p{
		font-size: 0.24rem;
		color: #6d9bdb;
		margin: 0;
		line-height: 0.4rem;
	}
	.content-wrapper p span{
		color: #39def7;
	}
	.score-content-res .content-wrapper{
		display: inline-block;
		vertical-align: middle;
	}
	.icon-r{
		width: 0.14rem;
		height: 0.25rem;
		background:url("./image/icon-r.png");
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		right: 0.25rem;
		top: 0.96rem;
	}
	/*底部*/
	.score-footer{
		height: 4rem;
		text-align: center;
	}
	.score-footer button{
		width: 3.6rem;
		height: 0.77rem;
		background-color: #185bb6;
		border-radius: 0.1rem;
		border: none;
		color: #dcdcdc;
		font-size: 0.28rem;
	}
	.list-footer{
		text-align: center;
	}
	.list-footer1{
		font-size: 0.24rem;
		color: #a0c0ed;
		line-height: 0.14rem;
	}
	.list-footer2{
		font-size: 0.24rem;
		color: #ffe373;
	}
	.list-footer3{
		font-size: 0.28rem;
		color: #a0c0ed;
	}
</style>
